import React from 'react'
import { NavBar, Button, Card, List, Checkbox, Tag } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './orderDetail.module.css'


function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  console.log(state)

    // 去支付
    const price = state.lps[0].atp ;
    const handleToPay = () =>{
      const id = Math.random().toString().slice(2, 6);
        // 
        navigate(`/pay?price=${price}&title=支付页面&id=${id}`)
    }

  return (
    <div>
      <NavBar onBack={() => { navigate(-1) }}>订单详情</NavBar>
      <p>排队成功....</p>
      {/* 列表大盒子 */}
      <div>
        <div className={styles.box}>
          {/* 上 */}
          <div className={styles.top}>
            {/* 左边 */}
            <div className={styles.left}>
              {/* 1 */}
              <div>
                <p>{state.dst}</p>
                <p>{state.dasn} {state.dat}</p>
              </div>
              {/* ---- */}
              <div>-----→</div>
              {/* 2 */}
              <div>
                <p>{state.ast}</p>
                <p>{state.aasn} {state.aat}</p>

              </div>
            </div>
            {/* 右边 */}
            <div className={styles.right}>￥{state.lps[0].atp}</div>
          </div>
          {/* 下 */}
          <div className={styles.foot}>
            <span>{state.ss[0].asn}</span> || {''}
            <span>{state.ss[0].amn}</span>
          </div>

          <p style={{ display: 'flex', justifyContent: 'space-around' }}>
            <span>二等座 有票</span>
            <span>一等座 有票</span>
            <span>特等座 18票</span>
          </p>
        </div>
      </div>

      <div>
        <h3>温馨提示</h3>
      </div>
      <Button block color='primary' size='large' onClick={() => handleToPay()}>
        支付订单
      </Button>
    </div>
  )
}

export default Index
